<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />举报
    </view>
    <view class="shuoming">
      <view class="name">填写举报说明（必填）</view>
      <view class="kuang">
        <textarea
          class="textarea"
          maxlength="300"
          auto-height
          v-model="reportContent"
          placeholder="请详细填写举报理由"
        />
        <p>{{ reportContent.length }}/300</p>
      </view>
    </view>
    <view class="shangchuan">
      <view class="cu-form-group">
        <view class="grid col-4 grid-square flex-sub">
          <view
            class="bg-img"
            v-for="(item, index) in imgList"
            :key="index"
            @tap="ViewImage"
            :data-url="imgList[index]"
          >
            <image :src="imgUrl + item" mode="aspectFit" />
            <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
              <text class="cuIcon-close"></text>
            </view>
          </view>
          <view class="solids" @tap="ChooseImage" v-if="imgList.length < 9">
            <text class="cuIcon-cameraadd"></text>
          </view>
        </view>
      </view>
    </view>
    <view class="tijiao">
      <checkbox class="round" @click="checked = !checked" :checked="checked"></checkbox>
      <view style="display: inline-block; width: 620rpx">
        <span>举报即默认同意</span>
        <!-- <span style="color: #64b6a8" @click="xieyi(4)">《个人信息保护声名》</span> -->
        <span style="color: #64b6a8" @click="xieyi(3)">《用户协议》</span>
        <span style="color: #64b6a8" @click="xieyi(2)">《隐私协议》</span>
      </view>
      <view class="but" @click="submit">立即举报</view>
    </view>
    <view class="motaikuang1" v-show="show1" @click="show1 = false">
      <view class="text">
        <view class="textTitle">{{ text }}</view>
        <scroll-view class="scroll-view" scroll-y>
          <!-- <rich-text :nodes="data.content"></rich-text> -->
          <!-- #ifdef MP-WEIXIN -->
          <rich-text :nodes="data.content"></rich-text>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <mp-html :content="data.content"></mp-html>
          <!-- #endif -->
        </scroll-view>
      </view>
    </view>
    <uniBall></uniBall>
  </view>
</template>
<script>
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        xuan: '',
        imgList: [],
        reportContent: '',
        imgUrl: this.$imgSrc,
        id: '',
        houseId: '',
        userInfo: uni.getStorageSync('Pduser'),
        checked: false,
        show1: false,
        text: '',
        content: '获取验证码',
        data: {},
      }
    },
    onLoad(options) {
      this.id = options.id
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    methods: {
      ViewImage(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url,
        })
      },
      DelImg(e) {
        uni.showModal({
          title: '',
          content: '确定要删除该图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.imgList.splice(e.currentTarget.dataset.index, 1)
            }
          },
        })
      },
      submit() {
        if (!this.checked) {
          uni.showToast({
            title: '请同意协议',
            icon: 'none',
            mask: true,
          })
          return
        }
        // if (this.xuan == "") {
        //   uni.showToast({
        //     title: "请输选择举报类型",
        //     icon: "none",
        //     mask: true
        //   });
        //   return;
        // }
        if (!this.reportContent || this.reportContent == '') {
          uni.showToast({
            title: '请输入文字',
            icon: 'none',
            mask: true,
          })
          return
        }
        let data = {
          userId: this.userInfo.id,
          bUserId: this.id,
          // houseId: this.houseId,
          // reportType: this.xuan,
          reportContent: this.reportContent,
          image: this.imgList.join('|'),
        }
        console.log(data)
        // return;
        this.$myRequest.post('/mob/user/addUserReport', data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '举报成功',
              icon: 'none',
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        })
      },
      changeType(e) {
        this.xuan = e.detail.value
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: { url: param },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      ChooseImage() {
        let _this = this
        uni.chooseImage({
          count: 9 - _this.imgList.length,
          sizeType: ['copressed'],
          sourceType: ['camera', 'album'],
          success(res) {
            //因为有一张图片， 输出下标[0]， 直接输出地址
            const tempFiles = res.tempFiles
            let panduan = false
            tempFiles.forEach((i, j) => {
              let length = ''
              // #ifdef H5
              length = i.name.length
              let resType = i.name.substring(length - 1, length)
              // #endif
              // #ifndef H5
              length = i.path.length
              let resType = i.path.substring(length - 1, length)
              // #endif
              if (resType != 'g' && resType != 'G') {
                panduan = true
              }
            })
            if (panduan) {
              uni.showToast({
                title: '不支持当前文件格式',
                icon: 'none',
              })
              return
            }
            var imgFiles = res.tempFilePaths
            // console.log(imgFiles);
            if (_this.imgList.length + imgFiles.length > 9) {
              uni.showToast({
                title: '图片最多不能超过9张',
                duration: 2000,
                icon: 'none',
              })
              return
            }
            var uper
            imgFiles.forEach((el) => {
              uni.showToast({
                title: '正在上传请稍后',
                icon: 'none',
                duration: 2000,
              })
              uper = uni.uploadFile({
                // 需要上传的地址
                url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                // filePath  需要上传的文件
                filePath: el,
                name: 'file',
                success(res1) {
                  // console.log(res1.data);
                  _this.imgList.push(JSON.parse(res1.data).data[0].url)
                },
              })
            })

            // onProgressUpdate 上传对象更新的方法
            uper.onProgressUpdate(function (res) {})
          },
          fail: (fail) => {
            // uni.showModal({
            //   title: '提示',
            //   content: '操作权限已被拒绝，请手动前往设置',
            //   confirmText: '立即设置',
            //   success: (res) => {
            //     if (res.confirm) {
            //       if (plus.os.name === 'iOS') {
            //         plus.runtime.openURL('app-settings://')
            //       } else {
            //         var Intent = plus.android.importClass('android.content.Intent')
            //         var Settings = plus.android.importClass('android.provider.Settings')
            //         var Uri = plus.android.importClass('android.net.Uri')
            //         var mainActivity = plus.android.runtimeMainActivity()
            //         var intent = new Intent()
            //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
            //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
            //         intent.setData(uri)
            //         mainActivity.startActivity(intent)
            //       }
            //     }
            //   },
            // })
          },
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      Handle(success) {
        // console.log(success);
        if (!this.canClick) return //改动的是这两行代码
        this.canClick = false
        this.show = false
        this.content = this.totalTime + 's后重新发送'
        this.$myRequest
          .get('/mob/login/phoneVerification.do', {
            phone: this.phone,
          })
          .then((res) => {
            console.log(res)
            this.code = res.CODE
          })
        let clock = window.setInterval(() => {
          this.totalTime--
          this.content = this.totalTime + 's后重新发送'
          if (this.totalTime < 0) {
            window.clearInterval(clock)
            this.content = '重新发送验证码'
            this.totalTime = 60
            this.canClick = true //这里重新开启
          }
        }, 1000)
      },
      xieyi(type) {
        this.show1 = true
        let _this = this
        _this.$myRequest.get('/mob/user/getText', { type: type }).then((res) => {
          this.data = res.list[0]
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .box {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #333;
    background-color: #fff;
  }
  .motaikuang1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;
    .text {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      left: 0;
      padding-top: 60rpx;
      padding-bottom: 100rpx;
      border-radius: 50rpx 50rpx 0 0;
      .textTitle {
        font-size: 36rpx;
        line-height: 50rpx;
        text-align: center;
        margin-bottom: 50rpx;
      }
      .scroll-view {
        height: 700rpx;
        margin: 0 auto;
        width: 630rpx;
      }
    }
  }
  .tijiao {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    padding-bottom: 40rpx;
    background-color: #fff;
    checkbox {
      vertical-align: top;
      margin-right: 6rpx;
      margin-left: 40rpx;
    }
    span {
      font-size: 26rpx;
    }
    .but {
      width: 670rpx;
      height: 80rpx;
      background: #64b6a8;
      border-radius: 50rpx;
      font-size: 34rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      margin-top: 24rpx;
      margin-left: 40rpx;
    }
  }
  .shangchuan {
    margin-top: 24rpx;
    margin-left: 8rpx;
    padding-bottom: 212rpx;
  }
  .shuoming {
    .name {
      font-size: 34rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;
    }
    .kuang {
      position: relative;
      width: 670rpx;
      min-height: 80rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;

      border: 1px solid #c9c9c9;
      textarea {
        width: 620rpx;
        margin-left: 24rpx;
        margin-top: 14rpx;
        line-height: 50rpx;
        letter-spacing: 2rpx;
        padding-bottom: 50rpx;
      }
      p {
        position: absolute;
        bottom: 10rpx;
        right: 20rpx;
        color: #999999;
      }
    }
  }
  .leixin {
    .name {
      font-size: 34rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;
    }
    .radioList {
      margin-top: 40rpx;
      margin-left: 70rpx;
    }
    .radio {
      display: block;
      font-size: 34rpx;
      margin-bottom: 40rpx;
      radio {
        margin-right: 20rpx;
      }
    }
  }
  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }
  .grid.col-4.grid-square > uni-view {
    width: 212rpx;
    height: 212rpx;
  }
  .grid.col-4.grid-square > uni-view:nth-child(3n) {
    margin-right: 0;
  }
  /deep/uni-radio .wx-radio-input,
  /deep/uni-radio .uni-radio-input {
    width: 46rpx;
    height: 46rpx;
  }
  /deep/.uni-radio-input-checked {
    background-color: #64b6a8 !important;
    border-color: #64b6a8 !important;
  }
  /deep/uni-checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0);
    border: 2rpx solid #999;
  }
  /deep/uni-checkbox .wx-checkbox-input,
  /deep/uni-checkbox .uni-checkbox-input {
    width: 28rpx;
    height: 28rpx;
  }
  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border: 2rpx solid #64b6a8 !important;
  }
  /deep/.tijiao uni-checkbox::before {
    font-size: 24rpx;
    margin-top: -14rpx;
    right: 4rpx !important;
  }
  .textarea {
    min-height: 200rpx;
  }
</style>
